<template>
  <div class="article-comments">
    <!-- 评论列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="(item, index) in commentList" :key="index">
        <van-image
          slot="icon"
          round
          width="30"
          height="30"
          style="margin-right: 10px;"
          :src="item.aut_photo"
        />
        <span style="color: #466b9d;" slot="title">{{ item.aut_name }}</span>
        <div slot="label">
          <p style="color: #363636;">{{ item.content }}</p>
          <p>
            <span style="margin-right: 10px;">{{ item.pubdate | fTime }}</span>
            <van-button size="mini" type="default" @click="replyComment(item)"
              >{{ item.reply_count }}回复</van-button
            >
          </p>
        </div>
        <!-- 点赞图标 -->
        <span>
          <van-icon
            slot="right-icon"
            :name="item.is_liking ? 'like' : 'like-o'"
            @click="isPointLike(item, index)"
          />
        </span>
      </van-cell>
    </van-list>
    <!-- 评论列表 -->

    <!-- 发布评论 -->
    <van-cell-group class="publish-wrap">
      <van-field clearable placeholder="请输入评论内容" v-model.trim="comment">
        <van-button slot="button" size="mini" type="info" @click="pubComment"
          >发布</van-button
        >
      </van-field>
    </van-cell-group>
    <!-- /发布评论 -->
    <!-- 回复评论弹框 -->
    <van-popup
      v-model="showReplyCom"
      closeable
      round
      v-if="showReplyCom"
      close-icon="close"
      position="bottom"
      :style="{ height: '80%' }"
    >
      <ReplyComment :curCom="curComment"></ReplyComment>
    </van-popup>
  </div>
</template>

<script>
// 引入获取文章评论接口
import {
  getComment,
  giveComment,
  pointLike,
  cancelLike
} from "@/api/comment.js";
// 引入回复评论组件
import ReplyComment from "./replyComment.vue";
export default {
  data() {
    return {
      offset: null, //评论列表翻页
      commentList: [], //评论列表
      loading: false, //加载
      finished: false, //是否全部加载完成
      comment: "", //发布评论的内容
      showReplyCom: false, //回复评论弹层
      curComment: {} //点击恢复的当前评论信息
    };
  },
  props: {
    articleID: {
      type: String
    }
  },
  components: {
    ReplyComment
  },
  methods: {
    //获取评论列表
    async getCommentList() {
      // const articleId = this.articleId;
      console.log(this.articleId, "文章id，评论");
      console.log(this.$route, "评论页");
      // const artId = this.$route.params.id;
      const artId = this.articleID;
      try {
        const res = await getComment({
          type: "a",
          source: artId
        });
        console.log(res, "评论列表");
        //还有可能获取不到
        if (res.data.data.results === 0) {
          this.finished = true;
          return;
        }
        this.commentList.push(...res.data.data.results);
        this.loading = false;
        this.finished = true;
      } catch (err) {
        console.log(err);
        this.finished = true;
        this.$toast.fail("获取文章评论失败");
      }
    },
    onLoad() {
      this.getCommentList();
    },
    //发布评论
    async pubComment() {
      // 获取输入框的值
      // console.log(this.comment,"发布评论的内容");
      const value = this.comment;
      // 判断是否为空
      if (!value) {
        this.$toast("评论内容不能为空");
        return;
      }
      // 调接口
      try {
        const res = await giveComment({
          target: this.articleID,
          content: value
        });
        console.log(res, "成功评论");
        // 成功之后，修改本地的数据
        let result = res.data.data.new_obj;
        // this.$set(this.commentList,this.commentList.length,result);
        this.commentList.push(result);
        // 调父组件的方法修改父组件的scrollTop
        this.$nextTick(() => {
          this.$emit("editScroll");
        });
      } catch (err) {
        console.log(err);
        // 失败提示
        this.$toast("发布评论失败");
      }
      // 清空输入框的值
      this.comment = "";
    },
    // 对评论点赞
    async isPointLike(item, index) {
      try {
        // 判断是否已经点赞
        if (item.is_liking) {
          // 如果已经点赞，调取消点赞接口
          const res = await cancelLike(item.com_id);
          // 修改本地的数据
          console.log(res);
          // this.commentList[index].is_liking = false;
          item.is_liking = false;
        } else {
          // 如过没有点赞，调点赞的接口
          const res = await pointLike(item.com_id);
          console.log(res);
          // this.commentList[index].is_liking = true;
          item.is_liking = true;
        }
        this.$set(this.commentList, index, item);
      } catch (err) {
        console.log(err);
        this.$toast("点赞或不点赞失败");
      }
    },
    // 回复评论
    replyComment(comConent) {
      // 打开弹层
      this.showReplyCom = true;
      // 把comConent保存到data中，在传递给子组件，这样子组件才能每次都能拿到值
      this.curComment = comConent;
    }
    // editscro() {
    //   this.$refs.pop.scrollTop = this.$refs.pop.scrollHeight;
    // }
  },
  mounted() {
    // console.log(this.$refs.pop,"ref");
  }
};
</script>
<style lang="less" scoped>
.publish-wrap {
  position: fixed;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
/deep/.van-popup__close-icon {
  color: #ffffff;
}
</style>
